<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator="/" style="margin-bottom: 20px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :inline="true" :model="user" class="demo-form-inline">
        <el-form-item label="昵称">
          <el-input
            v-model="user.nickname"
            placeholder="请输入用户昵称"
            clearable
            size="large"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getUserListData">搜索</el-button>
          <el-button type="success" @click="dialogVisible = true"
            >+新增用户</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="adminname" label="用户名" />
        <el-table-column prop="nickname" label="用户昵称" />
        <el-table-column label="用户头像">
          <template #default="scope">
            <img :src="scope.row.avatar" style="width: 60px" />
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="update(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" @click="delUser(scope.row.adminid)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="user.page"
        v-model:page-size="user.pageSize"
        :page-sizes="[2, 4, 6, 8, 12]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getUserListData"
        @current-change="getUserListData"
        class="paginationn"
      />
      <el-dialog v-model="dialogVisible" style="width: 500px" @close="close">
        <template #header>
          <p>{{ mode == 'add' ? '用户新增' : '用户修改' }}</p>
        </template>
        <template #default>
          <el-form
            ref="ruleFormRef"
            :model="userDialogInfo"
            :rules="rules"
            class="demo-userInfo"
            label-position="left"
            size="large"
          >
            <el-form-item label="用户名" prop="adminname">
              <el-input
                v-model="userDialogInfo.adminname"
                :disabled="mode === 'edit'"
              />
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickname">
              <el-input v-model="userDialogInfo.nickname" />
            </el-form-item>
            <el-form-item label="状态">
              <el-switch
                v-model="userDialogInfo.status"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-form>
        </template>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onsubmit">确认</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { UserQuery, UserInfo, HandlerUserDialogInfo } from '@/types/user'
import {
  getUserList,
  getAddUserInfo,
  updateUserInfo,
  deleteUser
  //
} from '@/api/user'
import { onMounted, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

// 用户查询时传递的数据
const user = ref<UserQuery>({
  nickname: '',
  page: 1,
  pageSize: 2
})

// 用户新增和修改的信息组装
const userDialogInfo = ref<HandlerUserDialogInfo>({
  adminid: '',
  adminname: '',
  nickname: '',
  status: 1
})
// 表单输入框的值
const ruleFormRef = ref<FormInstance>()
// 用户信息列表
const userList = ref([] as UserInfo[])
// 用户信息总条数
const total = ref(0)
// 模态框的显示隐藏状态
const dialogVisible = ref(false)
// 模态值，用来判断是新增还是修改
const mode = ref<'add' | 'edit'>('add')

// 调用接口获取用户列表
const getUserListData = async () => {
  const res = await getUserList(user.value)
  if (res.data.code === 200) {
    userList.value = res.data.data.items
    total.value = res.data.data.total
    console.log(userList.value)
  }
}
onMounted(() => {
  getUserListData()
})

// 表单校验规则
const rules = ref<FormRules<HandlerUserDialogInfo>>({
  adminname: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 5, max: 10, message: '请输入5-10位用户名', trigger: 'blur' }
  ],
  nickname: [
    { required: true, message: '昵称不能为空', trigger: 'blur' },
    { min: 5, max: 10, message: '请输入5-10位昵称', trigger: 'blur' }
  ]
})
//点击确认按钮 表单校验
const onsubmit = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate(async valid => {
    if (!valid) return
    const res =
      mode.value === 'add'
        ? await getAddUserInfo(userDialogInfo.value)
        : await updateUserInfo(userDialogInfo.value)

    ElMessage.success(res.data.message)
    if (mode.value === 'add') {
      user.value.page = 1
      getUserListData()
    }
    getUserListData()
    dialogVisible.value = false
  })
}

//弹窗关闭
const close = () => {
  mode.value = 'add'
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields()
  }
  userDialogInfo.value = { adminid: '', adminname: '', nickname: '', status: 1 }
}

//修改数据
const update = (row: HandlerUserDialogInfo) => {
  mode.value = 'edit'
  userDialogInfo.value = { ...row }
  dialogVisible.value = true
}

// 删除用户
const delUser = (adminid: string) => {
  ElMessageBox.confirm('你确定删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteUser(adminid)
    // 删除成功重新查询列表
    getUserListData()
  })
}
</script>

<style scoped lang="scss">
.paginationn {
  margin-left: 316px;
  margin-top: 20px;
}
</style>
